<template>
    <div class="my-menu">
        <el-menu
                class="menu"
                :router="true"
                ref="menu"
                background-color="#2e2e2e"
                text-color="#fff"
                active-text-color="yellow"
                unique-opened
                :collapse="isCollapsed">
            <el-menu-item style="font-size: 20px">
                <template slot="title">
                    <span slot="title">{{title}}</span>
                </template>
            </el-menu-item>
            <private-route :routes="myMenu.saleRoutes" icon="el-icon-goods" :title="$t('menu.sale')" idx="sale"/>

            <private-route :routes="myMenu.serviceRoutes" :title="$t('menu.serviceStation')" idx="service"
                           icon="el-icon-s-shop"/>

            <private-route :routes="myMenu.tidsRoutes" title="TID" idx="TID" icon="el-icon-s-data"/>
            <private-route :routes="myMenu.ielRoutes" title="IEL" idx="IEL" icon="el-icon-s-data"/>

            <private-route :routes="myMenu.moRoutes" :title="$t('menu.consignment')" idx="mo" icon="el-icon-s-home"/>

            <private-route :routes="myMenu.wedaRoutes" title="SP Weda" icon="el-icon-s-tools" idx="weda"/>

            <private-route :routes="myMenu.mskRoutes" title="SP MKS" icon="el-icon-s-tools" idx="msk"/>

            <private-route :routes="myMenu.tidRoutes" :title="$t('menu.serviceWarehouse')" icon="el-icon-s-home"
                           idx="tid"/>

            <private-route :routes="myMenu.exportRoutes" :title="$t('menu.export')"
                           idx="export" icon="el-icon-tickets"/>

            <private-route :routes="myMenu.spRoutes" :title="$t('menu.part')" icon="el-icon-setting"
                           idx="spart part"/>
            <private-route :routes="myMenu.heliRoutes" :title="$t('menu.heli')" icon="el-icon-s-tools"
                           idx="heli"/>

            <private-route :routes="myMenu.shanqiRoutes" :title="$t('menu.shac')" icon="el-icon-setting" idx="shanqi"/>

            <private-route :routes="myMenu.jianzhanRoutes" :title="$t('menu.inline')" idx="jianzhan"
                           icon="el-icon-setting"/>

            <private-route :routes="myMenu.unitRoutes" title="Unit Database" idx="unit" icon="el-icon-setting"/>


            <private-route :routes="myMenu.infoRoutes" :title="$t('menu.information')" idx="information"
                           icon="el-icon-message"/>

            <private-route :routes="myMenu.authRoutes" :title="$t('menu.auth')" idx="auth" icon="el-icon-s-grid"/>

            <private-route :routes="myMenu.logRoutes" :title="$t('menu.log')" icon="el-icon-message" idx="log"/>

        </el-menu>

    </div>

</template>

<script>
    import {mapGetters} from 'vuex'
    import privateRoute from './privateRoute'

    export default {
        name: "mymenu",
        data() {
            let auth = localStorage.getItem('auth') !== 'undefined' ? localStorage.getItem('auth') : '[]';
            let userInfo = localStorage.getItem('userInfo') !== 'undefined' ? localStorage.getItem('userInfo') : '{}';
            return {
                localAuth: JSON.parse(auth) || [],
                localUser: JSON.parse(userInfo) || {},
            }
        },
        computed: {
            ...mapGetters(['isCollapsed', 'auth', 'user', 'menu']),
            title() {
                return this.menu === 'iec' ?
                    this.$t('serviceSys') : this.menu === 'ser'
                        ?  this.$t('maintainSys')  :  this.$t('partSys')
            },
            myMenu() {
                return this[this.menu]
            },
            iel() {
                return {
                    exportRoutes: [{url: '/export', name: this.$t('menu.export')}],
                    moRoutes: [
                        {url: '/service-stock-in', name: this.$t('menu.stockIn')},
                        {url: '/mor/application', name: this.$t('menu.application')},
                        {url: '/service-stock-out', name: this.$t('menu.stockOut')},
                        {url: '/inventory', name: this.$t('menu.inventory')},
                        {url: '/inventory-record', name: this.$t('menu.inventoryRecord')},

                        {url: '/invoice', name: this.$t('menu.invoice')},
                        {url: '/idr-invoice', name: this.$t('menu.invoice') + '(IDR)'},
                        {url: '/mor/chart', name: this.$t('menu.salesChart')},
                    ],
                    wedaRoutes: [
                        {url: '/weda/stock-in', name: this.$t('menu.stockIn')},
                        {url: '/weda/application', name: this.$t('menu.application')},

                        {url: '/weda/stock-out', name: this.$t('menu.stockOut')},
                        {url: '/weda/int', name: this.$t('menu.inventory')},
                        {url: '/weda/inventory-record', name: this.$t('menu.inventoryRecord')},
                        {url: '/weda/inv', name: this.$t('menu.invoice')},
                        {url: '/weda/idr-invoice', name: this.$t('menu.invoice') + '(IDR)'},
                    ],
                    mskRoutes: [
                        {url: '/msk/application', name: this.$t('menu.application')},

                        {url: '/msk/stock-out', name: this.$t('menu.stockOut')},
                        {url: '/msk/stock-in', name: this.$t('menu.stockIn')},
                        {url: '/msk/int', name: this.$t('menu.inventory')},
                        {url: '/msk/inventory-record', name: this.$t('menu.inventoryRecord')},
                        {url: '/msk/inv', name: this.$t('menu.invoice')},
                        {url: '/msk/idr-invoice', name: this.$t('menu.invoice') + '(IDR)'},
                    ],
                    spRoutes: [
                        {url: '/part-list', name: this.$t('menu.partList')},
                        {url: '/fixed-part-price', name: this.$t('menu.partPrice')+'F'},
                        {url: '/part-price', name: this.$t('menu.partPrice')},
                        {url: '/part-stock', name: this.$t('menu.stockSum')},
                    ],
                    heliRoutes: [
                        {url: '/extra/part', name: ' 配件确认单'},
                        {url: '/heli/part-price', name: ' HELI 价格表'},
                    ],
                    shanqiRoutes: [
                        {url: '/shanqi/consignment', name: '寄售合同'},
                        {url: '/shanqi/box', name: '装箱'},
                        {url: '/shanqi/delivery', name: '发运'},
                        {url: '/shanqi/export', name: ' 进出口EXIM'},
                        {url: '/shanqi/stockin', name: '入库'},
                        {url: '/shanqi/stockout', name: '出库'},
                        {url: '/shanqi/inventory', name: '在库'},
                        {url: '/shanqi/cost', name: this.$t('menu.cost')},
                        {url: '/shanqi/statistic', name: '统计'},
                        {url: '/shanqi/chart', name: '图表'},
                    ],
                    jianzhanRoutes: [
                        {url: '/jianzhan/purchase-request', name: '采购申请'},
                        {url: '/jianzhan/consignment', name: '采购合同'},
                        {url: '/jianzhan/delivery', name: '发运'},
                        {url: '/jianzhan/export', name: '进出口EXIM'},
                        {url: '/jianzhan/cost', name: this.$t('menu.cost')},
                        {url: '/jianzhan/vendor', name: this.$t('menu.supplier')}
                    ],
                    unitRoutes: [
                        {url: '/property', name: 'Unit Property'},
                        {url: '/unit-type', name: 'Unit Type'},
                        {url: '/unit-list', name: 'Unit List'},
                        {url: '/unit-field', name: 'Unit Field'},
                        {url: '/unit-option', name: 'Unit Option List'},

                    ],
                    infoRoutes: [
                        {url: '/sys-customer', name: 'System Customer'},
                        {url: '/warehouse', name: 'Warehouse'},
                    ],
                    authRoutes: [
                        {url: '/user-manage', name: 'User Manage'},
                        {url: '/role-manage', name: 'Role Manage'},
                        {url: '/auth-manage', name: 'Authority Manage'},
                        {url: '/auth/module', name: 'Module'},
                        {url: '/auth/process', name: 'Approve Process'},
                    ],
                    logRoutes: [{url: '/log', name: 'User Log'}]
                }
            },
            iec() {
                return {
                    saleRoutes: [
                        //['/sale-approval','/info-collect','/my-sale-approval','/approve-sale-approval','/sale-follow','/my-contract','/unit-quotation','/part-quotation','/sales-order']
                        {url: '/part-quotation', name: this.$t('menu.quotation')},
                        {url: '/sales-order', name: this.$t('menu.salesOrder')},
                        {url: '/sales-eva', name: 'Contract Evaluation'}
                    ],
                    serviceRoutes: [
                        {url: '/quest', name: this.$t('menu.serviceRequest')},
                        {url: '/work-order', name: this.$t('menu.workOrder')},
                        {url: '/close-order', name: this.$t('menu.closeOrder')},
                        {url: '/tid/wo-invoice', name: this.$t('menu.invoice')},
                        {url: '/backup', name: this.$t('menu.document')},
                        {url: '/service-report', name: this.$t('menu.partReport')},
                        {url: '/service-report1', name: this.$t('menu.serviceReport')},
                        {url: '/point-code', name: this.$t('menu.pointCode')},
                        {url: '/cost', name: this.$t('menu.cost')},
                    ],
                    tidRoutes: [
                        {url: '/tid/purchase', name: this.$t('menu.purchaseRequest')},
                        {url: '/tid/application', name: this.$t('menu.application')},
                        {url: '/tid/stock-out', name: this.$t('menu.stockOut')},
                        {url: '/tid/stock-in', name: this.$t('menu.stockIn')},
                        {url: '/tid/int', name: this.$t('menu.inventory')},
                        {url: '/tid/inventory-record', name: this.$t('menu.inventoryRecord')},
                        {url: '/tid/inv', name: this.$t('menu.invoice')},
                        {url: '/tid/idr-invoice', name: this.$t('menu.invoice') + '(IDR)'},
                        {url: '/tid/vendor', name: this.$t('menu.supplier')}
                    ],
                    spRoutes: [
                        {url: '/iec-part-list', name: this.$t('menu.partList')},
                        {url: '/iec-part-price', name: this.$t('menu.partPrice')},
                        {url: '/material-type', name: this.$t('menu.partType')},
                    ],
                    infoRoutes: [
                        {url: '/employee', name: this.$t('menu.employee')},
                        {url: '/customer', name: this.$t('menu.customer')},
                        {url: '/service-equipment', name: this.$t('menu.equipment')},
                        {url: '/service-project', name: this.$t('menu.project')},
                        {url: '/position-level', name: this.$t('menu.positionLevel')},
                        {url: '/work-board', name: this.$t('menu.workBoard')},
                        {url: '/department', name: this.$t('menu.department')},
                        {url: '/human', name: this.$t('menu.human')},
                    ],
                }
            },
            ser() {
                return {
                    tidsRoutes: [
                        {url: '/tids/oil', name: this.$t('menu.oil')},
                    ],
                    ielRoutes:[
                        {url:'/iel/monthReport',name:this.$t('monthReport')},
                        {url:'/iel/dayReport',name:this.$t('dayReport')},
                    ]
                }
            }
        },
        mounted() {
            if (!this.user && this.localUser) {
                this.$router.replace('/');
            }
        },
        methods: {
            urlAvailible(url) {
                const auth = this.auth && this.auth.menu ? this.auth : this.localAuth;  // 先从store中获取权限信息保证是实时的，如果页面刷新则采用localstorage中的数据
                if (auth && auth.menu) {
                    return auth.menu.some(menu => {
                        if (Array.isArray(url)) {
                            return url.indexOf(menu.url) > -1
                        } else {
                            return url === menu.url
                        }
                    })
                } else {
                    return false
                }
            }
        },
        watch: {
            $route(router) {
                if (this.$refs.menu.activeIndex) {
                    this.$refs.menu.activeIndex = router.path
                } else {
                    this.$refs.menu.activeIndex = router.path || '';
                }
            },
            auth() {
                this.$forceUpdate();
            }
        },
        components: {
            privateRoute
        }
    }
</script>

<style scoped lang="scss">
    .el-menu {
        border-right: none;
    }
</style>